<!DOCTYPE html>
<html >
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    
    <title>关于浏览器端WebRTC的使用 | xilixili.net</title>
    <meta name="renderer" content="webkit">
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <meta name="description" content="WebRTC被开源后是越来越火，主要应该是第一是里面的各种音视频及通信技术，第二是浏览器无插件实现P2P模式的视频通话。之前很有兴趣玩这玩意，最终也是浅尝辄止。最近工作上也开始搞这块东西，又从头仔细研究了下，随便做点记录。
起因虽然说浏览器端，但是标题这么起，其实肯定最终不是简单的JS API调用，因为我要做的是直播，肯定不是P2P的一对一，但好歹也是要在浏览器上做，就先记录下浏览器上测试使用的简">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="关于浏览器端WebRTC的使用 | xilixili.net">
    <meta name="twitter:description" content="WebRTC被开源后是越来越火，主要应该是第一是里面的各种音视频及通信技术，第二是浏览器无插件实现P2P模式的视频通话。之前很有兴趣玩这玩意，最终也是浅尝辄止。最近工作上也开始搞这块东西，又从头仔细研究了下，随便做点记录。
起因虽然说浏览器端，但是标题这么起，其实肯定最终不是简单的JS API调用，因为我要做的是直播，肯定不是P2P的一对一，但好歹也是要在浏览器上做，就先记录下浏览器上测试使用的简">

    <meta property="og:type" content="article">
    <meta property="og:title" content="关于浏览器端WebRTC的使用 | xilixili.net">
    <meta property="og:description" content="WebRTC被开源后是越来越火，主要应该是第一是里面的各种音视频及通信技术，第二是浏览器无插件实现P2P模式的视频通话。之前很有兴趣玩这玩意，最终也是浅尝辄止。最近工作上也开始搞这块东西，又从头仔细研究了下，随便做点记录。
起因虽然说浏览器端，但是标题这么起，其实肯定最终不是简单的JS API调用，因为我要做的是直播，肯定不是P2P的一对一，但好歹也是要在浏览器上做，就先记录下浏览器上测试使用的简">

    
    <meta name="author" content="rangerlee">
    
    <link rel="stylesheet" href="/css/vno.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">

    
    <link rel="icon" href="/images/avatar-small.png">
    

    <meta name="generator" content="hexo"/>
    
    <link rel="alternate" type="application/rss+xml" title="xilixili.net" href="/atom.xml">
    

    <link rel="canonical" href="xilixili.net/2017/11/16/about-webrtc-on-browser/"/>

                 
</head>

<body class="home-template no-js">
    <script src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/js/main.js"></script>
    <span class="mobile btn-mobile-menu">
        <i class="fa fa-list btn-mobile-menu__icon"></i>
        <i class="fa fa-angle-up btn-mobile-close__icon hidden"></i>
    </span>

    
<header class="panel-cover panel-cover--collapsed">
  <div class="panel-main">
    <div class="panel-main__inner panel-inverted">
    <div class="panel-main__content">

        <h1 class="panel-cover__title panel-title"><a href="/" title="访问首页 xilixili.net">xilixili.net</a></h1>
        
        <span class="panel-cover__subtitle panel-subtitle"><!-- 生活と技术の杂记 --></span>
        
        <hr class="panel-cover__divider">
        
        <p class="panel-cover__description">生活と技术の杂记</p>
        
	<hr class="panel-cover__divider panel-cover__divider--secondary">

        <div class="navigation-wrapper">
          <div>
          <nav class="cover-navigation cover-navigation--primary">
            <ul class="navigation">
              <li class="navigation__item"><a href="/#blog" title="访问博客" class="blog-button">博客</a></li>
            
            </ul>
          </nav>
          </div>
          <div>
          <nav class="cover-navigation navigation--social">
  <ul class="navigation">

  <!-- Weibo-->
  

  <!-- Github -->
  
  <li class="navigation__item">
    <a href="https://github.com/rangerlee" title="查看我的GitHub主页" target="_blank">
      <i class="social fa fa-github"></i>
      <span class="label">Github</span>
    </a>
  </li>


<!-- Stack Overflow -->
        

  <!-- Google Plus -->
  

<!-- Facebook -->

  
<!-- Twitter -->

  

  <li class="navigation__item">
    <a href="/atom.xml" title="RSS" target="_blank">
      <i class="social fa fa-rss"></i>
      <span class="label">RSS</span>
    </a>
  </li>


  <li class="navigation__item">
    <a href="mailto:http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&amp;email=RzUmKSAiNSsiIgchKD8qJi4raSQoKg" title="邮件联系我" target="_blank">
      <i class="social fa fa-envelope"></i>
      <span class="label">Email</span>
    </a>
  </li>


  </ul>
</nav>

          </div>
        </div>

      </div>

    </div>

    <div class="panel-cover--overlay cover-alpha"></div>
  </div> 
</header>
<script type="text/javascript">
var side = document.getElementsByClassName("panel-cover")[0];
function checkWebp() {
	try{
		return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
	}catch(err) {
		return false;
	}
};

if(checkWebp()) {
	side.style.backgroundImage = "url('/images/background-cover.jpg.webp')";
} else {
	side.style.backgroundImage = "url('/images/background-cover.jpg')";
}
</script>


    <div class="content-wrapper">
        <div class="content-wrapper__inner">
            <article class="post-container post-container--single">

  <header class="post-header">
    <div class="post-meta">
      <time datetime="2017-11-16T11:23:00.000Z" class="post-list__meta--date date">2017-11-16</time> &#8226; <span class="post-meta__tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
 </span>
      <span class="page-pv">
       阅读 <span id="busuanzi_value_page_pv"><i class="fa fa-spinner fa-spin"></i></span>
      </span> 
   
    </div>
    <h1 class="post-title">关于浏览器端WebRTC的使用</h1>
  </header>

  <section class="post">
    <p>WebRTC被开源后是越来越火，主要应该是第一是里面的各种音视频及通信技术，第二是浏览器无插件实现P2P模式的视频通话。之前很有兴趣玩这玩意，最终也是浅尝辄止。最近工作上也开始搞这块东西，又从头仔细研究了下，随便做点记录。</p>
<h3 id="起因"><a href="#起因" class="headerlink" title="起因"></a>起因</h3><p>虽然说浏览器端，但是标题这么起，其实肯定最终不是简单的JS API调用，因为我要做的是直播，肯定不是P2P的一对一，但好歹也是要在浏览器上做，就先记录下浏览器上测试使用的简单方法吧。</p>
<a id="more"></a>
<h3 id="简单通信"><a href="#简单通信" class="headerlink" title="简单通信"></a>简单通信</h3><p>WebRTC的使用，主要的过程是将调用浏览器API产生的本地的ICE信息和SDP信息做个交换，实现P2P的视频通话。WebRTC没有实现信令层，意思是信令可以采用各种方式实现，比如WebSocket，SIP等。采用WebSocket比较简单，网上一般都是Node实现WebSocket服务，可惜不怎么精通，就用Java实现个，在IDEA创建个WebApp项目，</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="keyword">package</span> com.xxx.webrtc;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.io.IOException;</span><br><span class="line"><span class="keyword">import</span> java.util.concurrent.CopyOnWriteArraySet;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> javax.websocket.*;</span><br><span class="line"><span class="keyword">import</span> javax.websocket.server.ServerEndpoint;</span><br><span class="line"></span><br><span class="line"><span class="meta">@ServerEndpoint</span>(<span class="string">"/ws"</span>)</span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">WebSocketSession</span> </span>&#123;</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">private</span> <span class="keyword">static</span> CopyOnWriteArraySet&lt;WebSocketSession&gt; clientSet = <span class="keyword">new</span> CopyOnWriteArraySet&lt;WebSocketSession&gt;();</span><br><span class="line">  </span><br><span class="line">  <span class="keyword">private</span> Session session;</span><br><span class="line">  </span><br><span class="line">  <span class="meta">@OnOpen</span></span><br><span class="line">  <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onOpen</span><span class="params">(Session session)</span> </span>&#123;</span><br><span class="line">    System.out.println(<span class="string">"接受一个连接 "</span> + session.getId());</span><br><span class="line">    <span class="keyword">this</span>.session = session;</span><br><span class="line">    clientSet.add(<span class="keyword">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@OnClose</span></span><br><span class="line">  <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onClose</span><span class="params">()</span> </span>&#123;</span><br><span class="line">    System.out.println(<span class="string">"释放一个连接 "</span> + session.getId());</span><br><span class="line">    clientSet.remove(<span class="keyword">this</span>);</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@OnMessage</span></span><br><span class="line">  <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onMessage</span><span class="params">(String message, Session session)</span> </span>&#123;</span><br><span class="line">    <span class="keyword">for</span>(WebSocketSession item : clientSet) &#123;</span><br><span class="line">      <span class="keyword">try</span> &#123;</span><br><span class="line">        <span class="keyword">if</span>(session != item.session)</span><br><span class="line">          item.sendMessage(message);</span><br><span class="line">      &#125; <span class="keyword">catch</span> (IOException e)&#123;</span><br><span class="line">        e.printStackTrace();</span><br><span class="line">        <span class="keyword">continue</span>;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="meta">@OnError</span></span><br><span class="line">  <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onError</span><span class="params">(Session session, Throwable error)</span> </span>&#123;</span><br><span class="line">    error.printStackTrace();</span><br><span class="line">  &#125;</span><br><span class="line">  </span><br><span class="line">  <span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">sendMessage</span><span class="params">(String message)</span> <span class="keyword">throws</span> IOException </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.session.getBasicRemote().sendText(message);</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>maven配置添加websocket支持</p>
<figure class="highlight xml"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">dependency</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">groupId</span>&gt;</span>javax.websocket<span class="tag">&lt;/<span class="name">groupId</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">artifactId</span>&gt;</span>javax.websocket-api<span class="tag">&lt;/<span class="name">artifactId</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">version</span>&gt;</span>1.1<span class="tag">&lt;/<span class="name">version</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">scope</span>&gt;</span>provided<span class="tag">&lt;/<span class="name">scope</span>&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">dependency</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>然后在<code>index.jsp</code>里面把浏览器代码搞过去<br><figure class="highlight html"><table><tr><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">video</span> <span class="attr">id</span>=<span class="string">"remoteVideo"</span> <span class="attr">autoplay</span>=<span class="string">""</span>&gt;</span><span class="tag">&lt;/<span class="name">video</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="built_in">window</span>.RTCPeerConnection = <span class="built_in">window</span>.mozRTCPeerConnection || <span class="built_in">window</span>.webkitRTCPeerConnection;</span><br><span class="line">  <span class="built_in">window</span>.RTCSessionDescription = <span class="built_in">window</span>.mozRTCSessionDescription || <span class="built_in">window</span>.RTCSessionDescription;</span><br><span class="line">  <span class="built_in">window</span>.RTCIceCandidate = <span class="built_in">window</span>.mozRTCIceCandidate || <span class="built_in">window</span>.RTCIceCandidate;</span><br><span class="line">  <span class="built_in">window</span>.URL = <span class="built_in">window</span>.webkitURL || <span class="built_in">window</span>.URL;</span><br><span class="line"></span><br><span class="line">  <span class="comment">/*仅仅用于控制哪一端的浏览器发起offer，#号后面有值的一方发起*/</span></span><br><span class="line">  <span class="keyword">var</span> isCaller = <span class="built_in">window</span>.location.href.split(<span class="string">'#'</span>)[<span class="number">1</span>];</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> socket = <span class="keyword">new</span> WebSocket(<span class="string">"ws://192.168.1.178:3000/ws"</span>);</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> iceServer = &#123;</span><br><span class="line">    <span class="string">"iceServers"</span>: [&#123; <span class="string">"url"</span>: <span class="string">"stun:stun.l.google.com:19302"</span> &#125;]</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> pc = <span class="keyword">new</span> RTCPeerConnection(iceServer);</span><br><span class="line"></span><br><span class="line">  pc.onicecandidate = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(event);</span><br><span class="line">    <span class="keyword">if</span> (event.candidate !== <span class="literal">null</span>) &#123;</span><br><span class="line">      socket.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">        <span class="string">"event"</span>: <span class="string">"_ice_candidate"</span>,</span><br><span class="line">        <span class="string">"data"</span>: &#123; <span class="string">"candidate"</span>: event.candidate &#125;</span><br><span class="line">      &#125;));</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  pc.onaddstream = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">document</span>.getElementById(<span class="string">'remoteVideo'</span>).src = URL.createObjectURL(event.stream);</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> sendOfferFn = <span class="function"><span class="keyword">function</span>(<span class="params">desc</span>) </span>&#123;</span><br><span class="line">    pc.setLocalDescription(desc);</span><br><span class="line">    socket.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">      <span class="string">"event"</span>: <span class="string">"_offer"</span>,</span><br><span class="line">      <span class="string">"data"</span>: &#123; <span class="string">"sdp"</span>: desc &#125;</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;,</span><br><span class="line">  sendAnswerFn = <span class="function"><span class="keyword">function</span>(<span class="params">desc</span>) </span>&#123;</span><br><span class="line">    pc.setLocalDescription(desc);</span><br><span class="line">    socket.send(<span class="built_in">JSON</span>.stringify(&#123;</span><br><span class="line">      <span class="string">"event"</span>: <span class="string">"_answer"</span>,</span><br><span class="line">      <span class="string">"data"</span>: &#123; <span class="string">"sdp"</span>: desc &#125;</span><br><span class="line">    &#125;));</span><br><span class="line">  &#125;;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> n = navigator;</span><br><span class="line">  n.getMedia = n.webkitGetUserMedia || n.mozGetUserMedia;</span><br><span class="line">  n.getMedia(&#123; <span class="string">"audio"</span>: <span class="literal">true</span>, <span class="string">"video"</span>: <span class="literal">true</span> &#125;,</span><br><span class="line">  <span class="function"><span class="keyword">function</span>(<span class="params">stream</span>) </span>&#123;</span><br><span class="line">    pc.addStream(stream);</span><br><span class="line">    <span class="keyword">if</span> (isCaller) &#123;</span><br><span class="line">      pc.createOffer(sendOfferFn,</span><br><span class="line">      <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123; </span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'Failure callback: '</span> + error);</span><br><span class="line">      &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'getUserMedia error: '</span> + error);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">  socket.onmessage = <span class="function"><span class="keyword">function</span>(<span class="params">event</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> json = <span class="built_in">JSON</span>.parse(event.data);</span><br><span class="line">    <span class="keyword">if</span> (json.event === <span class="string">"_ice_candidate"</span>) &#123;</span><br><span class="line">      pc.addIceCandidate(<span class="keyword">new</span> RTCIceCandidate(json.data.candidate));</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">      pc.setRemoteDescription(<span class="keyword">new</span> RTCSessionDescription(json.data.sdp));</span><br><span class="line">      <span class="keyword">if</span> (json.event === <span class="string">"_offer"</span>) &#123;</span><br><span class="line">        pc.createAnswer(sendAnswerFn,</span><br><span class="line">        <span class="function"><span class="keyword">function</span>(<span class="params">error</span>) </span>&#123;</span><br><span class="line">          <span class="built_in">console</span>.log(<span class="string">'Failure callback: '</span> + error);</span><br><span class="line">        &#125;);</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;;</span><br></pre></td></tr></table></figure>
<p>项目跑到Tomcat里面访问，其中一方先打开这个网页，另外一方在地址后面加 <code>#true</code>，以示主动发起连接，这样双方就能互看对方了，我把显示本地摄像头的代码删除了。HTML本身也不精通，写的不规范，像里面的WebSocket通信肯定是要等连接上服务器再操作，仅作测试就暂时忽略。</p>
<h3 id="直播模式"><a href="#直播模式" class="headerlink" title="直播模式"></a>直播模式</h3><p>虽然说是直播模式，其实还没有实现，刚接触WebRTC的同学肯定是发现本地浏览器没安装摄像头都不能调用API。情况如此吗？肯定不是，如果你深入了解就会发现WebRTC的API原来是有一些配置选项的，比如只接收不发送，这就不需要摄像头了。话说回来这不就是直播模式么。</p>
<figure class="highlight javascript"><table><tr><td class="code"><pre><span class="line"><span class="keyword">var</span> mediaConstraints = &#123;</span><br><span class="line">  optional: [],</span><br><span class="line">  mandatory: &#123;</span><br><span class="line">    OfferToReceiveAudio: <span class="literal">true</span>,</span><br><span class="line">    OfferToReceiveVideo: <span class="literal">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line">pc.createOffer(sendOfferFn, <span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'Failure callback: '</span> + error);</span><br><span class="line">&#125;, mediaConstraints);</span><br></pre></td></tr></table></figure>
<p>基本上就是这么回事，多了个<code>mediaConstraints</code>配置实现只直播观众端的情况。</p>
<h3 id="注意事项"><a href="#注意事项" class="headerlink" title="注意事项"></a>注意事项</h3><h4 id="关于浏览器支持"><a href="#关于浏览器支持" class="headerlink" title="关于浏览器支持"></a>关于浏览器支持</h4><p>WebRTC被Google开源后，并不是所以浏览器都可以支持，具体支持情况还是需要去查，总之WebKit内核浏览器基本没问题。有些国产双核浏览器也要去测试下。</p>
<h4 id="关于通信加密"><a href="#关于通信加密" class="headerlink" title="关于通信加密"></a>关于通信加密</h4><p>现在调WebRTC需要在HTTPS环境下才能调，对于调试很麻烦，比如里面的WebSocket通信也必须加密即wss，不过localhost环境不限制。</p>
<h4 id="关于设备独占"><a href="#关于设备独占" class="headerlink" title="关于设备独占"></a>关于设备独占</h4><p>摄像头在一台机器只能被一个设备调用独占，因此上面的测试你要在本机测试的话，还是用直播模式的配置去做，否则肯定是有一个浏览器报错。</p>

  </section>

</article>

<section class="read-more">
           
    
               
            <div class="read-more-item">
                <span class="read-more-item-dim">最近的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2017/11/30/webrtc-live/" title="WebRTC直播技术">WebRTC直播技术</a></h2>
                <p class="excerpt">
                
                前文描述了正常的浏览器端采用WebRTC进行视频通话的方法，也介绍了当前流行的RTMP架构的直播模式，及相关技术等。那么面对WebRTC这项技术，我们是否能够将两者结合呢，即采用WebRTC来进行直播。整好项目中有这样的需求，因此做了一段时间的技术预研，简单分享下。
技术假设想使用WebRTC技术做
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2017-11-30T09:52:00.000Z" class="post-list__meta--date date">2017-11-30</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2017/11/30/webrtc-live/">继续阅读</a></div>
                           
            </div>
        
        
               
            <div class="read-more-item">
                <span class="read-more-item-dim">更早的文章</span>
                <h2 class="post-list__post-title post-title"><a href="/2017/11/01/nginx-live-stream/" title="Nginx架构下的直播">Nginx架构下的直播</a></h2>
                <p class="excerpt">
                
                之前已经编译好了nginx的RTMP扩展，其实在这个扩展中已经默认增加支持了HLS和DASH功能，在使用RTMP功能的同时，也可以输出HLS和DASH。更关键的是RTMP只能在PC端播放，刚好采用HLS的方式可以在移动端播放。
                &hellip;
                </p>
                <div class="post-list__meta"><time datetime="2017-11-01T08:41:00.000Z" class="post-list__meta--date date">2017-11-01</time> &#8226; <span class="post-list__meta--tags tags">
  <a class="tag-link" href="/tags/技术/">技术</a>
</span><a class="btn-border-small" href="/2017/11/01/nginx-live-stream/">继续阅读</a></div>
                       
            </div>
        
     
   
   
  
</section>



	<script>
	(function(){
		var bp = document.createElement('script');
		var curProtocol = window.location.protocol.split(':')[0];
		if (curProtocol === 'https') {
			bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
		}
		else {
			bp.src = 'http://push.zhanzhang.baidu.com/push.js';
		}
		var s = document.getElementsByTagName("script")[0];
		s.parentNode.insertBefore(bp, s);
	})();
	</script>



<script>
(function(){
var src = (document.location.protocol == "http:") ? "http://js.passport.qihucdn.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1":"https://jspassport.ssl.qhimg.com/11.0.1.js?8612a7fa26d7ba4562be733ae33649b1";
document.write('<script src="' + src + '" id="sozz"><\/script>');
})();
</script>



            <footer class="footer">
    <span class="footer__copyright">
        &copy; 2023 rangerlee - 本站点采用 <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>
       
    </span>
    <span class="footer__copyright">
             - 本站基于开源 <a href="http://hexo.io">Hexo</a> 搭建，采用 <a href="https://github.com/rangerlee/hexo-theme-new-vno">hexo-theme-new-vno</a> 主题，修改自 <a href="https://github.com/monniya/hexo-theme-new-vno ">new-vno</a> 主题  <a href="http://www.beian.miit.gov.cn">皖ICP备16009457号</a>
         </span>
       
    
    
</footer>


        </div>
    </div>

     
    
    <script>
        var _hmt = _hmt || [];
        (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?bab4f71524319c10819bcae280021624";
            var s = document.getElementsByTagName("script")[0]; 
            s.parentNode.insertBefore(hm, s);
        })();
    </script>



    <script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    
    
</body>
</html>
